<template>
    <div class="hebeica">
        <div class="ca-top">
            <div class="title">{{CONFIG_PROJECT.title}} 让投标工作更简单</div>
            <div class="quick-link">
                <template v-for="(item,index) in quickLinkList">
                    <a :href="item.url" target="_blank" :key="index">
                        <img :src="item.img" alt="">
                        <span>{{item.text}}</span>
                    </a>
                </template>
            </div>
        </div>

        <div class="ca-cont">

            <div class="top-nav">
                <div class="nav-item" v-for="item in navList" :key="item.id" @click="navClick(item)" :class="item.id == currentNavId ? 'active' : ''">
                    {{ item.text }}
                </div>
            </div>

            <div class="search-box">
                <div class="search-box2">
                    <div v-if="currentNavId !== 'projectManager'">
                        <el-cascader v-model="pgData.area" :options="provincesdata" ref="cascaderHandle"
                            :props="{value:'valueid', label:'valuename',children: 'childList',checkStrictly: true}" @change="changeHandler"
                            :show-all-levels="false" class="search-select" size="mini" placeholder="地区" clearable></el-cascader>
                    </div>
                    <div v-if="currentNavId === 'notice'">
                        <my-select placeholder="公告类型" size="mini" v-model="pgData.type" :data="noticeList" :props="{value:'value',label:'name'}"
                            class="search-select" clearable>
                        </my-select>
                    </div>

                    <div v-if="currentNavId === 'business'">
                        <my-select placeholder="单位类型" size="mini" v-model="pgData.dwType" :data="dwList" :props="{value:'type',label:'dwname'}"
                            class="search-select" clearable @select="dwSelect">
                        </my-select>
                    </div>
                </div>

                <el-input :placeholder="placeholderText" v-model="pgData.title" :class="[currentNavId == 'projectManager' ? 'input-with-select' :'']" clearable>
                    <div class="search-btn" slot="append" @click="searchHandler">
                        搜索
                    </div>
                </el-input>
            </div>

            <div>
                <notice v-if="currentNavId === 'notice'" :search-obj="pgData" ref="notice"></notice>
                <business v-if="currentNavId === 'business'" :search-obj="pgData" ref="business"></business>
                <projectManager v-if="currentNavId === 'projectManager'" :search-obj="pgData" ref="projectManager"></projectManager>
            </div>

        </div>
    </div>
</template>

<script>
import CONFIG_PROJECT from '@config/project';

import { mapGetters, mapActions } from 'vuex';

import notice from './components/notice.vue';
import business from './components/business.vue';
import projectManager from './components/project-manager.vue';

export default {
    components: {
        notice,
        business,
        projectManager
    },
    data() {
        return {
            CONFIG_PROJECT,

            //  嵌在河北ca的客户端里 链接需要加上惠投的前缀吗
            quickLinkList: [
                { img: '/images/outsys/hebeica/bszz.png', text: '标书制作', url: '/application/file-agent' },
                { img: '/images/outsys/hebeica/bsjc.png', text: '标书检查', url: '/application/file-check' },
                { img: '/images/outsys/hebeica/sjrm.png', text: '商机人脉', url: '/business-contact' },
                { img: '/images/outsys/hebeica/jkds.png', text: '监控对手/业主', url: '/home?recommend_type=business' },
                { img: '/images/outsys/hebeica/tbfak.png', text: '投标方案库', url: '/document' },

                { img: '/images/outsys/hebeica/tbfazz.png', text: '投标方案制作', url: '/application/biddingfiletool' },
                { img: '/images/outsys/hebeica/sjbg.png', text: '数据报告', url: '/tools/data-export' },
            ],

            pgData: {
                type: '',
                area: [''],
                title: '',
                // title: '秦皇岛市海港区热电联产集中供热南线主管网联通工程',
                dwType: '',
            },
            noticeNames: '',
            area: '',

            currentNavId: 'notice',
            searchInput: '',
            select: '',

            navList: [
                {
                    id: 'notice',
                    text: '查公告',
                },
                {
                    id: 'business',
                    text: '查企业',
                },
                {
                    id: 'projectManager',
                    text: '查项目经理',
                },
            ],

            noticeList: [],
            tableData: [],

            dwList: [
                {
                    type: '',
                    dwname: '全部',
                },
                {
                    type: 'cgdw',
                    dwname: '采购单位',
                },
                {
                    type: 'tbqy',
                    dwname: '投标企业',
                },
                {
                    type: 'zbdl',
                    dwname: '招标代理机构',
                },
            ],
        };
    },
    computed: {
        ...mapGetters({
            provinces: 'city/getProvinces',
            // cities: "city/getCities",
        }),

        provincesdata() {
            let targetData = [
                {
                    citylevel: '',
                    parentid: '',
                    valueid: '',
                    valuename: '全国',
                },
                ...this.provinces,
            ];
            return targetData;
        },

        placeholderText: function () {
            if (this.currentNavId === 'notice') {
                return '请输入公告名称进行查询';
            } else if (this.currentNavId === 'business') {
                return '请输入企业名称进行查询';
            } else if (this.currentNavId === 'projectManager') {
                return '请输入项目经理名称进行查询';
            }
        },
    },
    mounted() {
        this.getNoticeData();
        this.queryCity();
    },
    methods: {
        ...mapActions({
            queryCity: 'city/queryCities',
        }),

        dwSelect() {
            console.log(this.pgData.dwType);
        },

        searchHandler() {
            if (this.currentNavId === 'notice') {
                this.$refs.notice.$refs['page'].queryData();
            } else if (this.currentNavId === 'business') {
                this.$refs.business.$refs['page'].queryData();
            } else if (this.currentNavId === 'projectManager') {
                this.$refs.projectManager.$refs['page'].queryData();
            }
        },

        changeHandler(code) {
            this.$refs.cascaderHandle.dropDownVisible = false; //监听值发生变化就关闭它
        },

        navClick(item) {
            this.currentNavId = item.id;
        },
        getNoticeData() {
            this.noticeList = [
                {
                    id: '',
                    name: '全部',
                    value: '',
                },
                {
                    id: 1,
                    name: '招标计划公告',
                    value: '招标计划公告',
                },
                {
                    id: 2,
                    name: '政府采购意向',
                    value: '政府采购意向',
                },
                {
                    id: 3,
                    name: '政府采购意向变更',
                    value: '政府采购意向变更',
                },
                {
                    id: 4,
                    name: '招标公告',
                    value: '招标公告',
                },
                {
                    id: 5,
                    name: '变更公告',
                    value: '变更公告',
                },
                {
                    id: 6,
                    name: '中标候选人公示',
                    value: '中标候选人公示',
                },
                {
                    id: 7,
                    name: '中标公告',
                    value: '中标公告',
                },
            ];
        },
    },
};
</script>

<style lang="scss" scoped>
$primaryColor: #083be8;
$blackColor: #343434; //14px

.hebeica {
    height: 460px;
    width: 845px;
    background-color: #fefefe;
    .ca-top {
        height: 100px;
        background-image: url(/images/outsys/hebeica/ca-bg.png);
        .title {
            font-size: 25px;
            color: $primaryColor;
            font-weight: 600;
            padding: 15px 0;
            text-align: center;
        }
        .quick-link {
            display: flex;
            // justify-content: space-around;
            justify-content: space-evenly;
            align-items: center;

            a {
                font-size: 14px;
                color: $primaryColor;
                display: inline-block;
                img {
                    width: 15px;
                    height: 15px;
                    margin-bottom: -2px;
                }
                &:hover {
                    font-weight: 600;
                }
            }
        }
    }

    .ca-cont {
        .top-nav {
            width: 280px;
            margin: 15px auto 10px;
            display: flex;
            justify-content: space-between;

            .nav-item {
                cursor: pointer;

                &:hover {
                    color: $primaryColor;
                }
            }
        }
        .active {
            color: $primaryColor;
        }

        //搜索框
        .search-box {
            width: 660px;
            margin: 0 auto;
            position: relative;
            .search-box2 {
                position: absolute;
                top: 6px;
                left: 2px;
                z-index: 9999;

                padding: 0 5px;
                width: 200px;
                border-color: #3b68ff;
                border-radius: 0;

                display: flex;
                justify-content: space-between;
                & > div {
                    width: 100px;
                }
            }

            //中间 input
            ::v-deep .el-input__inner,
            ::v-deep .el-input__inner:focus {
                border-color: #dcdfe6 !important;
                // border-left: none;
                padding-left: 220px;
                border-radius: 0;
            }
            .search-select {
                width: 100px;
            }

            .input-with-select {
                ::v-deep .el-input__inner,
                ::v-deep .el-input__inner:focus {
                    padding-left: 15px;
                    border-radius: 0;
                }
            }

            // 左侧
            .select-box {
            }

            ::v-deep .el-input-group__prepend {
                background-color: rgba($color: #000000, $alpha: 0);
                padding: 0 5px;
                width: 210px;
                border-color: #3b68ff;
                border-radius: 0;
            }
            ::v-deep .el-input__inner,
            ::v-deep .el-input__inner:focus {
                border-color: #3b68ff !important;
            }
            .search-select {
                height: 28px;
                ::v-deep .el-input__inner {
                    color: $primaryColor;
                    height: 28px;
                    border-left: none;
                    border-top: none;
                    border-bottom: none;
                    border-radius: 0;
                    // border: none;
                    font-size: 14px;
                    padding: 0 25px 0 5px;
                    margin: 0;
                    border-color: #dcdfe6 !important;
                }
            }

            // 右侧
            .search-btn {
                width: 70px;
                padding: 0 !important;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background: #3b68ff;
                color: #fff;
                cursor: pointer;
                margin-top: -1px;
                z-index: 999;
            }
            ::v-deep .el-input-group__append {
                padding: 0;
            }
        }
    }
}
</style>
